<template>
  <view class="page">
    <image
      class="bg-image"
      src="https://ainengli.meilianshuke.com/jkhx/saas/bg.png"
      mode="scaleToFill"
    />
    <image
      class="bg-header"
      src="https://ainengli.meilianshuke.com/jkhx/saas/bg-header.png"
      mode="scaleToFill"
    />
    <view class="doctor-card">
      <image
        class="doctor-info-img"
        src="https://ainengli.meilianshuke.com/jkhx/saas/doctor-info.png"
        mode="scaleToFill"
      />
      <view class="doctor-content">
        <view class="doctor-avatar">
          <template v-if="doctorInfo && doctorInfo.avatar">
            <image
              class="doctor-avatar-image"
              :src="doctorInfo.avatar"
              mode="scaleToFill"
            />
          </template>
          <template v-else>
            <image
              v-if="
                doctorInfo && (doctorInfo.gender == 1 || doctorInfo.gender == 0)
              "
              class="doctor-avatar-image"
              src="https://ainengli.meilianshuke.com/jkhx/saas/doctor-man.png"
              mode="scaleToFill"
            />
            <image
              v-else
              class="doctor-avatar-image"
              src="https://ainengli.meilianshuke.com/jkhx/saas/doctor-woman.png"
              mode="scaleToFill"
            />
          </template>
        </view>
        <view class="doctor-info">
          <view class="doctor-info-text">
            <view class="doctor-info-text-title">
              <view class="doctor-name">
                {{ doctorInfo?.name || "-" }}
              </view>
              <view class="doctor-title">
                {{ doctorInfo?.titleName || "-" }}
              </view>
            </view>
            <view class="doctor-org-department">
              <view>{{ doctorInfo?.hospitalName || "-" }}</view>
              <view style="margin-left: 16rpx">{{
                doctorInfo?.departmentName || "-"
              }}</view>
            </view>
          </view>
          <view class="doctor-status">
            <view
              :class="['doctor-status-text', status ? 'active' : '']"
              @tap.stop="statusHandler"
            >
              <image
                v-if="status"
                class="btn-icon"
                src="https://ainengli.meilianshuke.com/jkhx/saas/check.png"
                mode="scaleToFill"
              />
              <image
                v-else
                class="btn-add-icon"
                src="https://ainengli.meilianshuke.com/jkhx/saas/add.png"
                mode="scaleToFill"
              />
              {{ status ? "已关注" : "关注TA" }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  getDoctorInfo,
  addDoctorAttention,
  deleteDoctorAttention,
} from "./follows.api";

const { proxy } = getCurrentInstance();

const doctorId = ref();
const doctorInfo = ref<any>();
const status = ref(true);

onLoad((options) => {
  console.log(options);
  if (options && options.doctorId) {
    doctorId.value = options.doctorId;
  }
});

onShow(() => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  doctorInfo.value = undefined;
  getDoctorInfo({ doctorUserId: doctorId.value })
    .then((res) => {
      uni.hideLoading();
      console.log(res);
      doctorInfo.value = res;
    })
    .catch((err) => {
      uni.hideLoading();
    });
});

const statusHandler = () => {
  console.log(
    status.value,
    doctorInfo.value,
    proxy.store,
    proxy.store.userInfo
  );

  if (status.value) {
    // 取消关注
    deleteDoctorAttention({
      doctorUserId: doctorInfo.value.doctorUserId,
    }).then(() => {
      status.value = false;
      proxy.utils.uni.toast("已取消关注");
    });
  } else {
    // 关注
    addDoctorAttention({
      doctorUserId: doctorInfo.value.doctorUserId,
      userId: proxy.store.userInfo.id,
      patientId: proxy.store.patient.current
        ? proxy.store.patient.current.id
        : 0,
      hospitalCode: doctorInfo.value.hospitalCode,
    }).then(() => {
      status.value = true;
      proxy.utils.uni.toast("关注成功");
    });
  }
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .bg-image {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
  }

  .bg-header {
    width: 100%;
    height: 260rpx;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
  }
}

.doctor-card {
  @include flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin-top: 94rpx;
  height: 480rpx;
  z-index: 1;

  .doctor-info-img {
    position: absolute;
    width: calc(100% - 8rpx);
    height: 480rpx;
    top: 0;
    left: 0;
    z-index: 0;
    padding: 4rpx;

    .tor-avatar-image {
      width: 100%;
      height: 100%;
    }
  }

  .doctor-content {
    width: 100%;
    height: 100%;
  }

  .doctor-avatar {
    width: 172rpx;
    height: 172rpx;
    position: absolute;
    top: -54rpx;
    left: 50%;
    margin-left: -86rpx;
    background-color: #fff;
    border-radius: 50%;
    z-index: 2;
    padding: 4rpx;

    .doctor-avatar-image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .doctor-info {
    z-index: 2;
    position: relative;
    flex: 1;
    @include flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-top: 150rpx;

    .doctor-info-text-title {
      @include flex;
      align-items: center;
      margin-bottom: 16rpx;
    }

    .doctor-info-text {
      @include flex;
      flex-direction: column;
      align-items: center;
    }

    .doctor-name {
      font-weight: bold;
      font-size: 40rpx;
    }

    .doctor-title {
      font-size: 24rpx;
      margin-left: 18rpx;
      color: #222;
    }

    .doctor-org-department {
      @include flex;
      align-items: center;
      font-size: 24rpx;
      color: #666;
    }
  }

  .doctor-status {
    margin-top: 56rpx;
    @include flex;
    justify-content: center;

    .doctor-status-text {
      width: 240rpx;
      height: 72rpx;
      border-radius: 120rpx;
      background-color: #00d1b6;
      color: #fff;
      font-size: 30rpx;
      @include flex;
      justify-content: center;
      align-items: center;
    }

    .active {
      background-color: #f5f5f5;
      color: #cccccc;
    }
  }
}

.btn-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
}

.btn-add-icon {
  width: 26rpx;
  height: 26rpx;
  margin-right: 12rpx;
}
</style>
